<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .book-list {
            border: 1px solid;
            padding: 20px;
            display: inline-block;
            background: reg(56, 131, 216);
            color: #dc1515;
        }
    </style>
</head>

<body>
    <script src="./js/vue.js"></script>
    <div id='app'>
        <people-list></people-list>
        <!-- <PeopleList></PeopleList> --><!--报错：使用kebab-case形式定义组件，只能使用kebab-case格式-->
        <book-item1></book-item1>
        <BookItem2></BookItem2><!--报错：因为浏览器解析标签时会将所有的大写字母转化为小写，此标签解析后<bookitem2></bookitem2>与注册组件名不一致，报找不到同名组件错误-->
        
        <book-list></book-list>
    </div>
    <script type="text/x-template" id="people-list">
        <ul>
            <li>tom</li>
            <li>jerry</li>
            <li>kevin</li>
       </ul>
    </script>
    <script>
        Vue.component('BookItem1',{
             template: '<div>书名：《西游记》</div>'
        }),
        Vue.component('BookItem2',{
            template: "<div>书名：《三国演义》</div>"
        }),
        Vue.component('people-list',{
            template: "#people-list"
        })
        //字符串模板使用PascalCase
        Vue.component('BookList',{
            //在字符串模板中使用kebab-case或PascalCase格式都可以
            template: `<ul class="book-list">
                                 <li><BookItem1></BookItem1></li>
                                <li><BookItem2></BookItem2></li>
                              </ul>`
        })
        let app = new Vue({
            el: "#app",
            data: {
                msg: 'hello world'
            }
        })
    </script>
</body>

</html>